<template>
  <AppHeader title="试卷一" :banAnimate="true" backgroundColor="#ffffff">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="container">
    <div class="top">
      单项填空（本题有15个小题，共计26分）
    </div>
    <div class="options-list" >
      <span v-for="i in 10" :key="i" :class="i===1?'circle-blue':i===6?'circle-red':''">{{i}}</span>
    </div>
    <div class="btn" @click="submit">
      <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)">交作业</van-button>
    </div>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const onClickLeft = () => {
  router.back();
};
const submit = () => { 
  router.push('/writtenTest/mockScoreDetails')
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #ffffff;
  padding-top: 44px;
  padding-bottom: 100px;
  overflow-y: auto;
  .top{
  font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 22px;
text-align: left;
font-style: normal;
padding: 15px 10px;
 }
.options-list{
  padding: 15px 10px;
  span{
margin: 7.5px;
width: 48px;
height: 48px;
border: 1px solid #E5E5E5;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #333333;
line-height: 46px;
text-align: center;
font-style: normal;
display: inline-block;
    border-radius: 50%;
&.circle-blue{
  border: 1px solid #0CB76C;
  color: #0CB76C;
}

&.circle-red{
  border: 1px solid #FA192C;
  color: #FA192C;
}
  }
}
 .btn{ padding: 30px 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
